<template>
	<div class="mvtk-certificateStatus-box">
		<div class="title-box"> <span class="border"></span> 持证状况</div>
		<view class="grid col-2 grid-box">
			<view class="padding-lr-sm" style="border-right: #eaeaea 1px dashed;">
				<view class="cu-list menu-avatar comment" style="">
					<view class="cu-item" style="background-color:transparent;padding: 9px 0px 9px 9px">
						<img src="./images/zjHome_tj2.png" alt="" style="width: 80upx;height: 80upx;" />
						<view class="content margin-left">
							<view class="flex text-grey" style=" font-size:22rpx">持证总数</view>
							<view class=" text-black" style="font-size: 28upx;">
								<text>{{ data.n10 }}</text>
								<text class="margin-left-xs">人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="margin-top padding-left" style=" font-size:22rpx">
					<span style="background-color: #3ee1ee;width: 10px;height: 10px; display: inline-block;border-radius: 50%;"></span>
					<text class="margin-left margin-right-xs">本月新增</text>
					<text class=" text-black">{{ data.n11 }}</text>
					<text class="margin-left-xs">人</text>
				</view>
				<view class="margin-top-sm padding-left" style=" font-size:22rpx">
					<span style="background-color: #fd7545;width: 10px;height: 10px; display: inline-block;border-radius: 50%;"></span>
					<text class="margin-left margin-right-xs">年度新增</text>
					<text class=" text-black">{{ data.n12 }}</text>
					<text class="margin-left-xs">人</text>
				</view>
			</view>
			<view class=" padding-left-xs">
				<view class="grid col-1">
					<view class="cu-list menu-avatar comment margin-right-xs">
						<view class="cu-item" style="background-color:transparent;padding: 9px 0px 9px 15px">
							<img src="./images/zjHome_tj3.png" alt="" style="width: 80upx;height: 80upx;" />
							<view class="content margin-left">
								<view class="flex text-grey" style=" font-size:22rpx">注销总数</view>
								<view class=" text-black" style="font-size: 28upx;">
									<text>{{ data.n20 }}</text>
									<text class="margin-left-xs">人</text>
								</view>
							</view>
						</view>
					</view>
					<view class="cu-list menu-avatar comment margin-right-xs" style="margin-top: 0;">
						<view class="cu-item" style="background-color:transparent;padding: 9px 0px 9px 15px">
							<img src="./images/zjHome_tj1.png" alt="" style="width: 80upx;height: 80upx;" />
							<view class="content margin-left">
								<view class="flex text-grey" style=" font-size:22rpx">到期总数</view>
								<view class=" text-black" style="font-size: 28upx;">
									<text>{{ data.n30 }}</text>
									<text class="margin-left-xs">人</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</div>
</template>

<script lang="ts" name="mvtkApi" setup>
	import {findPageFinishApi} from "../../../../src/api/index"
	import {ref} from "vue"
	const testClick=async ()=>{
		let {data} = await findPageFinishApi({id:1});
	}

	const data = ref({
		n10:111,
		n11:111,
		n12:111,
		n20:111,
		n30:111,
	})
</script>



<style lang="scss" scoped>
@import url('../../../../common/css/certificateStatus.scss');
</style>

